<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const allFn = (newVal, oldVal) => {
            console.log('打印', newVal, oldVal);
        }

        function defineReactive(data, key, val) {
            console.log('触发defineReactive')
            let dep = []
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get() {
                    dep.push(allFn)
                    return val
                },
                set(newVal) {
                    if (val == newVal) {
                        return
                    }
                    for (let i = 0; i < dep.length; i++) {
                        dep[i](newVal, val)
                    }
                    // val = newVal
                }
            })
        }
        let obj = {
            name: '张三'
        }
        defineReactive(obj, 'name', '李四')
        const fn1 = function() {
            console.log(1)
        }
        const fn2 = function() {
            console.log(2)
        }
        const fn3 = function() {
            console.log(1)
        }
        let arr = [fn1, fn2, fn3]
    </script>
</body>

</html>